<template>
	<div class="cmt-container">
		<h3>发表评论</h3>
		<hr>
		<textarea placeholder="请输入要BB的内容（最多吐槽120字）" maxlength="120"></textarea>

		<mt-button type="primary" size="large">发表评论</mt-button>
		
		<div class="cmt-list">
			<div class="cmt-item" v-for="(item,i) in commentsb" :key=item.add_time>
				<div class="cmt-title">
					第{{ i+1 }}楼&nbsp;&nbsp;用户：{{ item.user_name }}&nbsp;&nbsp;发表时间：{{ item.add_time | dateFormat }}
				</div>	
				<div class="cmt-body">
					{{ item.content === 'undefined' ? '此用户很懒，什么都没有说':item.content }}
				</div>
			</div>
<!-- 
						<div class="cmt-item">
							<div class="cmt-title">
								第2楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2020-12-25 12:12:12
							</div>	
							<div class="cmt-body">
								锄禾日当午 复方
							</div>
						</div>
						<div class="cmt-item">
							<div class="cmt-title">
								第3楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2020-12-25 12:12:12
							</div>	
							<div class="cmt-body">
								锄禾日当午 复方
							</div>
						</div>
 -->			
		</div>

		<mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
	</div>
</template>

<script>
	// 按需求导入 Toast 样式
	import { Toast } from 'mint-ui'

	export default{
		data(){
			return{
				// 展示第一页数据
				pageIndex:1,
				// 所有的真评论数据
				comments:[],
				// 所有评论的假数据
				commentsb:[
					{
						user_name:"匿名用户",
						add_time:"2020-12-28 09:30:12.000Z",
						content:"我来评论一下啦！"
					},
					{
						user_name:"匿名用户",
						add_time:"2020-12-28 09:31:12.000Z",
						content:"我来评论一下啦！"
					},
					{
						user_name:"匿名用户",
						add_time:"2020-12-28 09:33:12.000Z",
						content:"undefined"
					},
					{
						user_name:"匿名用户",
						add_time:"2020-12-28 09:34:12.000Z",
						content:"undefined"
					}
				],
				commentsb2:[
					{
						user_name:"匿名用户",
						add_time:"2020-12-28 09:35:12.000Z",
						content:"我来评论一下啦！"
					},
					{
						user_name:"匿名用户",
						add_time:"2020-12-28 09:36:12.000Z",
						content:"我来评论一下啦！"
					},
					{
						user_name:"匿名用户",
						add_time:"2020-12-28 09:37:12.000Z",
						content:"undefined"
					},
					{
						user_name:"匿名用户",
						add_time:"2020-12-28 09:38:12.000Z",
						content:"undefined"
					}
				]
			}
		},
/*
		created(){
			this.getComments()
		},
*/
		methods:{
			// 获取评论
			getComments(){
				this.$http.get("api/getcomments/" + this.id + "?pageindex=" + this.pageIndex).then(result => {
					console.log(result)
					if(result.status === 200){
						// 请求数据成功
						Toast('获取评论成功！！')
						this.comments = result.body
					} else {
						// 请求数据失败
						Toast('获取评论失败！！')
					}
				})
			},
			// 获取更多评论
			getMore(){
				// 真方法内容
				// this.pageIndex++
				// this.getComments
				// 假方法内容
				this.commentsb = this.commentsb.concat(this.commentsb2)
			}
		},
		props:["id"]
	}
</script>

<style lang="scss">
	.cmt-container{
		h3{
			font-size: 16px;
		}
		textarea{
			font-size: 14px;
			height: 85px;
			margin: 0;
		}
		.cmt-list{
			margin: 5px 0;
			.cmt-item{
				font-size: 13px;
				.cmt-title{
					line-height: 30px;
					background-color: #ccc;
				}
				.cmt-body{
					line-height: 35px;
					text-indent: 2em;
				}
			}
		}
	}
</style>